import $ from "jquery";

// 隔行换色效果
$("ul li").odd().css("color","red")
$("ul li").even().css("color","green")

/**
 *  隔行换色实现步骤
 * 1、创建项目文件夹day01-webpack-demo
 * 2、准备webpack环境
 *      3步完成
 *      2-1、初始化 npm init -y
 *      2-2、下载npm i webpack webpack-cli -D
 *      2-3、配置打包命令： "build": "webpack"
 * 3、新建public/index.html文件并准备li标签，下载jquery
 * 4、新建src/main.js文件，并配置入口文件为main.js
 * 5、在main.js中导入jq，实现隔行换色效果
 * 6、打包 npm run build
 * 7、手动把html文件复制到dist文件夹下，并引入打包后的js文件
 * 8、在浏览器中打开html文件 看效果
 */ 

 
import "./css/index.css"
/**
 * 总结：webpack默认情况下只能处理js文件
 * 如何处理css文件呢？
 * 答：可以通过加载器来处理
 *  css-loader style-loader
 * 使用步骤
 *  1、下载npm i css-loader style-loader -D
 *  1、通过module中的rules属性进行配置
 * 
 * */ 

// 引入less文件
import "./less/index.less"

/**
 * 总结：less的使用
 * 1、下载 npm i less less-loader -D
 * 2、通过module中的rules属性进行配置
 * 3、打包 看效果
 * 
 * */ 

// 使用图片
import imgSrc from "./assets/三剑客.png";
let _img = document.createElement("img");
_img.src = imgSrc;
document.body.appendChild(_img);

// 使用字体图标
import "./assets/fonts/iconfont.css"
let _i = document.createElement("i");
_i.className = "iconfont icon-qq";
document.body.appendChild(_i);

// 语法降级处理测试
let test = ()=>{
    console.log("我是一个箭头函数");
}
console.log(test);

// js  css less 图片 字体图标 js语法降级 html


/**
 * 开发服务器的使用（webpack-dev-server）
 * 为什么要使用？
 * 答：因为之前每次修改完成代码后要看效果都需要重新执行npm run build，非常麻烦且耗时
 * 因此需要用到
 * 使用步骤：
 * 1、下载
 * npm i webpack-dev-server -D
 * 2、配置启动服务器命令
 * "serve":"webpack serve"
 * 3、启动服务器
 * npm run serve
 * 
 * 4、验证开发服务器的作用
 *  比如：在less中修改样式，修改完成后，直接通过http://localhost:8080访问项目，看样式是否已经更新
 * 如果更新了，说明 webpack-dev-server 帮我们自动将最新的代码重新进行打包了
 * 
 * */ 